<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css" rel="stylesheet">
    <link href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.0/dist/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>

</head>
<body>

    <h1 id="ceshi">11111</h1>
    <table id="table">

    </table>

    <script>
        var $table = $('#table')

        $(function() {
            debugger;
            $table.bootstrapTable({
                url: '/category/findCategory',
                idField: 'id',
                showColumns: true,
                columns: [
                    {
                        field: 'id',
                        title: 'ID'
                    },
                    {
                        field: 'name',
                        title: '名称'
                    },
                    {
                        field: 'remark',
                        title: '备注',
                        align: 'center',
                        formatter: 'statusFormatter'
                    },
                    {
                        field: 'createdTime',
                        title: '创建日期'
                    }
                ],
                treeShowField: 'name',
                parentIdField: 'parentId',
                onPostBody: function() {
                    var columns = $table.bootstrapTable('getOptions').columns

                    if (columns && columns[0][1].visible) {
                        $table.treegrid({
                            treeColumn: 1,
                            onChange: function() {
                                $table.bootstrapTable('resetView')
                            }
                        })
                    }
                }
            })
        })

        function typeFormatter(value, row, index) {
            if (value === 'menu') {
                return '菜单'
            }
            if (value === 'button') {
                return '按钮'
            }
            if (value === 'api') {
                return '接口'
            }
            return '-'
        }

        function statusFormatter(value, row, index) {
            if (value === 1) {
                return '<span class="label label-success">正常</span>'
            }
            return '<span class="label label-default">锁定</span>'
        }
    </script>

</body>
</html>